<template>
    <div class="announcementDetails">
        <div class="announcementDetails-head">{{ noticeType.subject }}</div>
        <div class="announcementDetails-author"><i class="iconfont icon-people"></i>{{ fullName }}<i
            class="iconfont icon-time"></i>{{ noticeType.createTime }}
        </div>
        <image v-if="imgFileId" class="announcementDetails-img" :src="imageUrl(imgFileId)"/>
        <div v-if="files.length>0" class="accessory">
            <image class="accessory_img" src="@/static/fujian.png"/>
            <!-- 图片 -->
            <ul class="imgFlex">
                <li v-for="(file,index) in files" v-if="getIcon(file)==7" :key="index">
                    <image :src="imageUrl(file.fileId)"/>
                </li>
            </ul>
            <ul class="officeLayout">
                <li v-for="(file,index) in files" :key="index" @click="openFile(file)">
                    <i v-if="getIcon(file)==1" class="iconfont icon-live_fill"></i>

                    <i v-else-if="getIcon(file)==2" class="iconfont icon-excel"></i>

                    <i v-else-if="getIcon(file)==3" class="iconfont icon-word"></i>

                    <i v-else-if="getIcon(file)==4" class="iconfont icon-ppt"></i>

                    <i v-else-if="getIcon(file)==5" class="iconfont icon-txt"></i>

                    <i v-else-if="getIcon(file)==6" class="iconfont icon-pdf"></i>

                    <a>{{ file.name }}</a>
                </li>

            </ul>
        </div>
        <!-- 文件 -->
        <div class="dialog-h5" v-html="noticeType.content"></div>
    </div>
</template>

<script>
import modulesApi from "@/api/modules/modulesApi";

export default {
    name: "announcementDetails",
    data() {
        return {
            pkId: '',
            noticeType: {},
            fullName: '',
            files: [],
            imgFileId: '',
        }
    },
    onLoad(option) {
        this.pkId = option.pkId;
        this.init()
    },
    methods: {
        init() {
            modulesApi.readInsNews(this.pkId).then(res => {
                if (res.success) {
                    this.noticeType = res.data;
                    this.author(this.noticeType.createBy);
                    if (res.data.imgFileId) {
                        this.imgFileId = res.data.imgFileId
                    }
                    if (res.data.files) {
                        this.initValue(res.data.files)
                    }
                }
            })
        },
        //获取发布作者
        author(userId) {
            modulesApi.getByIdUserId(userId).then(res => {
                this.fullName = res.fullName;
            })
        },
        isOffice(file) {
            if (!file) {
                return false
            }
            let mediaType = ['pdf', '.txt', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx'];
            if (file) {
                for (var i = 0, j = mediaType.length; i < j; i++) {
                    if (file.name.toLowerCase().endsWith(mediaType[i])) {
                        return true;
                    }
                }
            }
            return false;
        },
        initValue(val) {
            if (!val) return [];
            let fileAry = JSON.parse(val);
            for (let i = 0; i < fileAry.length; i++) {
                let file = fileAry[i];
                file.selected = false;
            }
            this.files = fileAry;
        },
        getIcon(file) {
            if (!file) return;
            let fileName = file.name.toLowerCase();
            if (!fileName) return;
            let indexS = fileName.lastIndexOf(".");
            let extName = fileName.substr(indexS, fileName.length);
            let mediaType = ['.mp3', '.mp4', '.avi', '.rmvb'];
            let pptType = ['.ppt', '.pptx'];
            let pdfType = ['.pdf'];
            let docType = ['.doc', '.docx']
            let xlsType = ['.xls', '.xlsx'];
            let txtType = ['.txt'];
            let picType = ['.jpg', '.png', 'jpeg'];
            if (mediaType.includes(extName)) {
                return 1;
            } else if (xlsType.includes(extName)) {
                return 2;
            } else if (docType.includes(extName)) {
                return 3;
            } else if (pptType.includes(extName)) {
                return 4;
            } else if (txtType.includes(extName)) {
                return 5;
            } else if (pdfType.includes(extName)) {
                return 6;
            } else if (picType.includes(extName)) {
                return 7;
            }

        },
        openFile(file) {

        },
    }
}
</script>

<style scoped>
.announcementDetails {
    background-color: white;
    padding: 1rem;
    overflow: auto;
    height: 100%;
}

.announcementDetails-head {
    font-size: 1.5rem;
}

.announcementDetails-author {
    color: #C0C0C0;
    border-bottom: 1px solid #e8e8e8;
}

.announcementDetails-author i {
    margin-right: 0.1rem;
    position: relative;
    top: 0.1rem;
}

.announcementDetails-author i:nth-child(2) {
    margin-left: .5rem;
}

.announcementDetails-img {
    width: 100%;
    margin-top: 1rem;
}

.accessory_img {
    position: absolute;
    top: -.5rem;
    right: 0rem;
    width: 3rem;
    height: 1.5rem;

}

.accessory {
    position: relative;
    width: calc(100% - 1rem);
    margin: 1rem auto;
    background-color: #f0f3f7;
    border-radius: 4px;
    padding: .5rem;
}

.imgFlex {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-left: 0.2rem;
    margin-bottom: 0rem;
}

.imgFlex li {
    margin-right: .5rem;
}

.imgFlex image {
    width: 3rem;
    height: 3rem;
    border-radius: 0.3rem;
    border: 1px solid #e4ecec;
}

.officeLayout {
    margin: 0rem;
}

.officeLayout li {
    display: flex;
    align-items: center;
}

.officeLayout li i {
    margin-right: 10px;
}

i.icon-delete_fill:before {
    color: #ff7676;
    font-size: 1rem;
}

.officeLayout li > i.icon-excel:before {
    color: #05cc95;
    font-size: 1.5rem;
}

.officeLayout li > i.icon-word:before {
    color: #3d98f3;
    font-size: 1.5rem;
}

.officeLayout li > i.icon-ppt:before {
    color: #ffb915;
    font-size: 1.5rem;
}

.officeLayout li > i.icon-txt:before {
    color: #9279f3;
    font-size: 1.5rem;
}

.officeLayout li > i.icon-pdf:before {
    color: #ff7171;
    font-size: 1.5rem;
}

.officeLayout li > i.icon-live_fill:before {
    color: #5fc71e;
    font-size: 1.5rem;
}
.dialog-h5>>>img{
    width: 100%;
}
</style>
